<template>
  <div class="filter-input">
    <el-input
      v-model="query.name"
      placeholder="输入部门名称搜索"
      style="width: 200px;"
      class="filter-item"
    />
    <el-select v-model="query.enabled" clearable placeholder="状态" class="filter-item" style="width: 90px">
      <el-option v-for="item in enabledTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
    </el-select>
    <el-button type="primary" icon="el-icon-search" @click="$emit('search')">查 询</el-button>
    <el-button type="warning" icon="el-icon-refresh" @click="handleReset">重 置</el-button>
    <el-button type="success" icon="el-icon-plus" @click="handleAdd">新 增</el-button>
    <Dept :show-dept.sync="showDept" :title="'新增部门'" @search="$emit('search')" />
  </div>
</template>
<script>
import Dept from './Dept'
export default {
  components: {
    Dept
  },
  data() {
    return {
      enabledTypeOptions: [
        { key: 'true', display_name: '正常' },
        { key: 'false', display_name: '禁用' }
      ],
      query: {
        name: '',
        enabled: ''
      },
      showDept: false
    }
  },
  methods: {
    handleReset() {
      this.query.name = ''
      this.query.enabled = ''
      this.$emit('search')
    },
    handleAdd() {
      this.showDept = true
    }
  }
}
</script>
<style scoped lang="scss">
.filter-input{
    margin-bottom: 20px;
}
</style>
